<template>
  <div>
    <!-- v-infinite-scroll="load" -->
    <div class="wrapper">
      <div v-show="loading">
        <el-table
          class="loading"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 1)"
          style="width: 100%"
        >
        </el-table>
      </div>

      <div v-show="!loading">
        <!-- 歌手简介 -->
        <div class="title">
          <div class="img">
            <img :src="$store.state.singer_info.img1v1Url" alt="" />
          </div>
          <div class="info">
            <div>
              <h2>{{ $store.state.singer_info.name }}</h2>
            </div>
            <div class="info_wenzi">
              {{ $store.state.singer_info.alias[1] }}
            </div>
            <div class="btn">
              <div class="sc_btn">
                <div class="btn_img">
                  <img src="../assets/images/星星.png" alt="" />
                </div>
                <div class="sc">收藏</div>
              </div>
              <div
                class="gezx_btn"
                v-if="$store.state.singer_info.accountId ? true : false"
              >
                <div class="btn_img">
                  <img src="../assets/images/个人中心.png" alt="" />
                </div>
                <div class="gezx">个人中心</div>
              </div>
            </div>
            <div class="count">
              <span class="single_count"
                >单曲数:{{ $store.state.singer_info.musicSize }}</span
              >
              <span class="zj_count"
                >单曲数:{{ $store.state.singer_info.albumSize }}</span
              >
            </div>
          </div>
        </div>
        <!-- 歌手专辑  歌手的详情 -->

        <!-- 标签页位置 -->
        <div class="tab_click">
          <div
            :class="toggle_active === index ? 'active' : ''"
            v-for="(item, index) in toggle"
            :key="index"
            @click="toggle_fn(index)"
          >
            {{ item }}
          </div>
        </div>

        <!-- 专辑歌曲为止 -->
        <div class="zj" v-if="toggle_active === 0">
          <div class="zj_item">
            <div class="zj_img">
              <img :src="$store.state.singer_info.img1v1Url" alt="" />
            </div>
            <div class="zj_musics">
              <div class="zj_title">
                <div class="title">
                  <h2>热门50首</h2>
                </div>
                <div
                  class="el-icon-video-play"
                  @click="play_all_music($store.state.singer_all_play)"
                ></div>
              </div>
              <div class="zj_music">
                <div
                  class="music"
                  v-for="(item, index) in $store.state.ten_top_music"
                  :key="index"
                  @click="play_music(item)"
                >
                  <div class="index">{{ index + 1 }}</div>
                  <div class="music_name">
                    <span class="name">{{ item.name }}</span
                    ><span class="alia" v-if="item.alia[0]">
                      ( {{ item.alia[0] }} )
                    </span>
                  </div>
                  <div class="play_time">{{ item.dt }}</div>
                </div>
                <div class="music wenzi" v-if="all_look_music">
                  <div class="wenzi_sm" @click="all_look_fn()">
                    查看全部{{ this.$store.state.ten_top_music_len }}首
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div
            class="zj_item zj_aa"
            v-for="(item, index) in $store.state.get_singer_album"
            :key="index"
          >
            <div class="zj_img">
              <img @click="go_zj_details(item)" :src="item.picUrl" alt="" />
              <div class="time">{{ item.publishTime }}</div>
            </div>
            <div class="zj_musics">
              <div class="zj_title">
                <div class="title title_h2">
                  <h2>{{ item.name }}</h2>
                </div>
                <div
                  class="el-icon-video-play"
                  @click="play_all_music(item.all_album_music)"
                ></div>
              </div>
              <div class="zj_music">
                <div
                  class="music"
                  v-for="(item1, index1) in item.album_music"
                  :key="index1"
                  @click="play_music(item1)"
                >
                  <div class="index">{{ index1 + 1 }}</div>
                  <div class="music_name">
                    <span class="name"></span>{{ item1.name
                    }}<span class="alia" v-if="item1.alia[0]"
                      >({{ item1.alia[0] }})</span
                    >
                  </div>
                  <div class="play_time">{{ item1.dt }}</div>
                </div>
                <div class="music wenzi" v-if="item.len > 10">
                  <div class="wenzi_sm" @click="go_zj_details(item)">
                    查看全部{{ item.len }}首
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 歌手的详情 -->
        <div class="singer_details" v-if="toggle_active === 1">
          <div
            class="big_box"
            v-for="(item, index) in $store.state.singer_details_desc"
            :key="index"
          >
            <h4 class="title">{{ item.ti }}</h4>
            <div class="content_box">
              <p class="yd" v-for="(txt, index) in item.txt" :key="index">
                {{ txt }}
              </p>
              <!-- <p class="yd">你好啊呀</p> -->
            </div>
          </div>
        </div>

        <!-- 相似歌手 -->
        <div class="simi_singer" v-if="toggle_active === 2">
          <div
            class="singer"
            v-for="(item, index) in $store.state.simi_singer"
            :key="index"
            @click="gosingerDetails(item)"
            lazy
          >
            <div class="img">
              <img :src="item.picUrl" alt="" />
            </div>
            <div class="wenzi">{{ item.name }}</div>
          </div>
        </div>

        <!-- 歌手mv -->
        <div class="singer_mv" v-if="toggle_active === 3">
          <div
            class="mv"
            v-for="(item, index) in $store.state.singer_mv"
            :key="index"
          >
            <Mv :f1="item" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Mv from "../components/Mv.vue";
export default {
  name: "SingerDetails",
  data() {
    return {
      //   标签页
      toggle: ["专辑", "歌手详情", "相似歌手", "MV"],
      toggle_active: 0,

      // 控制最后显示全部歌曲的按钮显示隐藏
      all_look_music: true,
      // 控制loading
      loading: true,
    };
  },
  components: {
    Mv,
  },
  created() {
    this.get_singer_hot_music();
    this.get_singer_album_fn();
  },
  updated() {
    setTimeout(() => {
      this.loading = false;
    }, 500);
  },

  methods: {
    // 标签页切换
    toggle_fn(index) {
      this.toggle_active = index;
      if (index === 1) {
        this.singer_desc_fn();
        return;
      }
      if (index === 2) {
        this.loading = true;
        this.singer_simi_fn();
        return;
      }
      if (index === 3) {
        (this.loading = true), this.get_singer_mv_fn();
        return;
      }
    },

    // 获取歌手最热门的50首歌
    get_singer_hot_music() {
      this.axios({
        method: "get",
        url: "/artist/top/song",
        params: {
          id: this.$store.state.singer_info.id,
        },
      })
        .then((res) => {
          res.data.songs.forEach((v) => {
            v.dt = this.hms(v.dt);
          });

          console.log("res ===>", res);
          // 用于点击播放全部播放
          let a = res.data.songs;
          this.$store.commit("singer_all_play", a);
          console.log(
            "我是50首点击全部播放",
            this.$store.state.singer_all_play
          );

          // 获取歌手最火歌曲长度
          let ten_top_music_len = res.data.songs.length;
          // 将ten_top_music_len传给vuex的ten_top_music_len
          this.$store.commit("ten_top_music_len", ten_top_music_len);
          // 将获取到的数据前10首切下来 并且传给vuex的ten_top_music
          let ten_top_music = null;
          if (ten_top_music_len > 10) {
            // 切下来10首
            ten_top_music = res.data.songs.slice(0, 10);

            this.$store.commit("splice_behind", res.data.songs);
            // 剩下的等用户点击全部
            this.all_look_music = true;
          } else {
            ten_top_music = res.data.songs;
            this.all_look_music = false;
          }
          this.$store.commit("ten_top_music", ten_top_music);

          console.log("我是十首个", this.$store.state.ten_top_music);
          console.log(
            "我是全部歌曲的长度",
            this.$store.state.ten_top_music_len
          );
          console.log("我是剩下的", this.$store.state.splice_behind);
        })
        .catch((err) => {
          console.log("err ===>", err);
        });
    },
    // 点击查看全部的方法
    all_look_fn() {
      this.all_look_music = !this.all_look_music;
      this.$store.commit("ten_top_music_push", this.$store.state.splice_behind);
    },

    // 获取歌手专辑  /artist/album
    get_singer_album_fn() {
      this.axios({
        method: "get",
        url: "/artist/album",
        params: {
          limit: 10,
          id: this.$store.state.singer_info.id,
        },
      })
        .then((res) => {
          res.data.hotAlbums.forEach((v) => {
            v.publishTime = this.ymd(v.publishTime);
            console.log(v.id);
            this.get_singer_album_center_fn(v.id, v);
          });
          setTimeout(() => {
            this.$store.commit("get_singer_album", res.data.hotAlbums);
          }, 2000);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 获取专辑内容  /album
    get_singer_album_center_fn(id, v) {
      this.axios({
        method: "get",
        url: "/album",
        params: {
          id: id,
        },
      })
        .then((res) => {
          // 长度
          console.log("aa", this.$store.state.select_acchor_data.artists);
          v.len = res.data.songs.length;
          v.all_album_music = res.data.songs;
          v.sg = "sg";

          // 遍历格式化时间
          res.data.songs.forEach((v1) => {
            v1.dt = this.hms(v1.dt);
          });
          // 如果长度大于是  的切剩十条
          let ten = [];
          if (res.data.songs.length > 10) {
            v.active = 1;
            res.data.songs = res.data.songs.slice(0, 10);
          }
          v.album_music = res.data.songs;
          this.$store.commit("select_acchor_data", res.data.songs);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 点击播放
    play_music(item) {
      let play_info = {
        picUrl: "",
        name: "",
        playTime: "",
        song: {
          alias: [],
          artists: [{ name: "" }],
        },
        id: "",
        type: "singer_music",
      };
      //   图片路劲
      play_info.picUrl = item.al.picUrl;
      //   音乐名称层
      play_info.name = item.name;
      //   播放时间
      play_info.playTime = item.playtime;
      //   播放时间  毫秒形式
      play_info.playTimeS = item.dt;
      //
      play_info.song.alias = "";
      //   歌手名称
      play_info.song.artists[0].name = item.ar[0].name;
      //   音乐的id
      play_info.id = item.id;

      this.$store.commit("musis_info", play_info);
      this.$store.commit("play_list", play_info);
      this.$store.commit("src_id", play_info.id);
      this.$store.dispatch("get_src");
      this.$store.dispatch("check_music");

      console.log("item", item);
      console.log(this.$store.state.musis_info);
    },

    // 点击全部播放
    play_all_music(item) {
      console.log(item);
      let len = this.$store.state.play_list.length;
      item.forEach((v) => {
        let play_info = {
          picUrl: "",
          name: "",
          playTime: "",
          song: {
            alias: [],
            artists: [{ name: "" }],
          },
          id: "",
          type: "singer_music",
        };
        play_info.picUrl = v.al.picUrl;
        //   音乐名称层
        play_info.name = v.name;
        //   播放时间
        play_info.playTime = v.playtime;
        //   播放时间  毫秒形式
        play_info.playTimeS = v.dt;
        //
        play_info.song.alias = "";
        //   歌手名称
        play_info.song.artists[0].name = v.ar[0].name;
        //   音乐的id
        play_info.id = v.id;

        this.$store.commit("play_list", play_info);
      });
      if (this.$store.state.play_list[len]) {
        this.$store.commit("src_id", this.$store.state.play_list[len].id);
        this.$store.commit("musis_info", this.$store.state.play_list[len]);
        this.$store.dispatch("get_src");
      } else {
        return;
      }
    },

    // 点击专辑到专辑详情
    go_zj_details(item) {
      this.axios({
        method: "get",
        url: "/album/detail/dynamic",
        params: {
          id: item.id,
        },
      })
        .then((res) => {
          console.log(res);
          item.commentCount = res.data.commentCount;
          item.subCount = res.data.subCount;
          item.shareCount = res.data.shareCount;
          this.$store.commit("select_acchor_data", item);

          let artists = [];
          item.artists.forEach((v) => {
            artists.push(v, { name: "/" });
          });
          // 删除最后一个斜杆
          artists.pop();

          // 将修改好格式的数据传回去
          item.artists = artists;

          console.log(item);
        })
        .catch((err) => {
          console.log(err);
        });
      console.log(item);
      setTimeout(() => {
        this.$router.push({ name: "Zjdetails" });
      }, 500);
    },

    // 歌手的描述
    // /artist/desc  接口   歌手的id
    singer_desc_fn() {
      this.axios({
        method: "get",
        url: "/artist/desc",
        params: {
          id: this.$store.state.singer_info.id,
        },
      })
        .then((res) => {
          res.data.introduction.forEach((v) => {
            v.txt = v.txt.split("\n");
          });
          this.$store.commit("singer_details_desc", res.data.introduction);
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 获取相似歌手  /simi/artist
    singer_simi_fn() {
      this.axios({
        method: "get",
        url: "/simi/artist",
        params: {
          id: this.$store.state.singer_info.id,
        },
      })
        .then((res) => {
          console.log(res);

          this.$store.commit("simi_singer", res.data.artists);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 选择相似歌手 跳转只歌手详情
    gosingerDetails(item) {
      console.log(item);
      console.log("我要去歌手详情页");
      this.all_look_music = true;
      (this.loading = true), (this.toggle_active = 0);
      // 重新获取专辑
      this.$nextTick(() => {
        this.get_singer_album_fn();
        this.get_singer_hot_music();
      });
      this.$store.commit("singer_info", item);
      this.$router.push({ name: "SingerDetails" });
    },

    // 获取到歌手的mv /artist/mv
    get_singer_mv_fn() {
      this.axios({
        method: "get",
        url: "/artist/mv",
        params: {
          id: this.$store.state.singer_info.id,
        },
      })
        .then((res) => {
          console.log(res);
          res.data.mvs.forEach((v) => {
            v.duration = this.hms(v.duration);
          });
          this.$store.commit("singer_mv", res.data.mvs);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 格式化时间
    hms(times) {
      let t = "";
      let m =
        Math.floor(times / 1000 / 60) < 10
          ? "0" + Math.floor(times / 1000 / 60)
          : Math.floor(times / 1000 / 60);
      let s =
        Math.floor((times / 1000) % 60) < 10
          ? "0" + Math.floor((times / 1000) % 60)
          : Math.floor((times / 1000) % 60);
      t = `${m}:${s}`;
      return t;
    },

    // 年月日
    ymd(timestamp) {
      var date = new Date(timestamp);
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

      let strDate = Y + M + D;
      return strDate;
    },
  },
};
</script>

<style lang="less" scoped>
.wrapper {
  overflow-y: auto;
  height: 680px;
  position: relative;
}
.loading {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 500px;
}

.title {
  display: flex;
  .img {
    width: 230px;
    height: 230px;
    // background: aqua;
    img {
      width: 100%;
    }
  }
  .info {
    margin-left: 20px;
    .btn {
      display: flex;
      margin: 20px 0;
      .sc_btn,
      .gezx_btn {
        cursor: pointer;
        margin-right: 20px;
        // background: bisque;
        border: 1px solid #ccc;
        border-radius: 20px;
        padding: 5px 20px;
      }
      div {
        font-size: 20px;
        display: flex;
        align-items: center;

        .btn_img {
          width: 30px;
          img {
            width: 100%;
          }
        }
      }
    }
  }
  .count {
    span {
      display: inline-block;
      margin-right: 20px;
    }
  }
}

.tab_click {
  margin-top: 20px;
  display: flex;
  div {
    cursor: pointer;
    margin-left: 20px;
    font-size: 18px;
  }
  .active {
    font-weight: bold;
    border-bottom: 3px solid #e4393c;
  }
}

.zj {
  .zj_item {
    margin-bottom: 20px;
    padding: 20px 0 0 30px;
    box-sizing: border-box;
    display: flex;
    .zj_img {
      width: 190px;
      img {
        border-radius: 10px;
        width: 100%;
        cursor: pointer;
      }
      .time {
        cursor: default;
      }
    }
  }
  .zj_musics {
    margin-left: 30px;

    .zj_title {
      display: flex;
      align-items: center;
      .title {
        margin-right: 20px;
        h2 {
          margin: 0;
          cursor: default;
        }
      }
      .title_h2 {
        h2 {
          cursor: pointer;
        }
      }
      .el-icon-video-play {
        font-size: 30px;
        cursor: pointer;
      }
    }
    .zj_music {
      width: 730px;
      margin-top: 10px;

      .music {
        display: flex;
        height: 30px;
        line-height: 30px;
        cursor: pointer;
        &:nth-child(2n-1) {
          background: #f0f0f0;
        }
        &:hover {
          background: #ccc;
        }

        .index {
          flex: 0 7%;
          text-align: center;
          color: #999;
        }
        .music_name {
          flex: 0 83%;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          .name {
            color: #333;
          }
          .alia {
            color: #777;
          }
        }
        .play_time {
          flex: 0 10%;
          text-align: center;
          color: #999;
        }
      }
      .wenzi {
        .wenzi_sm {
          margin-left: auto;
          color: #777;
        }
        &:hover .wenzi_sm {
          color: black;
        }
      }
      .active {
        color: #e4393c !important;
      }
    }
  }
}

.singer_details {
  padding: 0 10px;
  .big_box {
    .title {
      // margin: 20px 0 0 0 ;
    }
    .content_box {
      .yd {
        // margin:0;
        text-indent: 2em;
        color: #555;
      }
    }
  }
}

.simi_singer {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  .singer {
    flex: 0 18%;
    margin-right: 20px;
    flex-wrap: wrap;
    &:nth-child(5n + 5) {
      margin-right: 0px;
    }
    .img {
      // background-color: blue;
      img {
        cursor: pointer;
        border-radius: 10px;
        width: 100%;
        height: 140px;
      }
    }
    .wenzi {
      margin: 10px 0;
      cursor: default;
    }
  }
}
.singer_mv {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
  padding-right: 20px;
  .mv {
    flex: 0 31%;
    margin-bottom: 10px;

    &:last-child {
      margin-left: 0;
    }
  }
}
</style>